<template>
  <div class="read_login">
    <div class="title_name">
      <span><i></i><b>在线报读</b><i></i></span>
    </div>
    <div class="form_list">
      <div class="input_item">
        <i class="iconfont icon-xueyuan"></i>
        <input type="text" disabled v-model="formData.institution">
      </div>
      <div class="input_item">
        <i class="iconfont icon-ren"></i>
        <input type="text" v-model="formData.user_name" placeholder="请输入姓名">
      </div>
      <div class="input_item">
        <i class="iconfont icon-shouji"></i>
        <input type="text" v-model="formData.phone" placeholder="请输入手机号码" :disabled="dragTrue">
      </div>
      <drag-verify ref="dragVerifyData" @refreshDataList="getDataTrue" class="dragVerify"></drag-verify>
      <div class="btn_input_item">
        <div class="input_item">
          <i class="iconfont icon-duanxinyanzhengma"></i>
          <input type="text" v-model="formData.phoneCode" placeholder="请输入短信验证码">
        </div>
        <button :class="dragTrue?'get_code':'get_code active'" :disabled="!dragTrue" @click="getPhoneCode">{{code_btn_text}}</button>
      </div>
      <button class="btn_submit" @click="yzPhoneCode">立即申请</button>
    </div>
    <div class="serve_user">
      <h4>专属服务</h4>
      <div class="tab_item">
        <div class="title_p">1、在线学习，全网考试<i class="inco_img"></i></div>
        <div class="title_span">在家就能学，在企业就能考</div>
      </div>
      <div class="tab_item">
        <div class="title_p">2、享院校助学金<i class="inco_img2"></i></div>
        <div class="title_span">来自院校的学费减免，报读时抵扣学费</div>
      </div>
      <div class="tab_item">
        <div class="title_p">3、享教学及退费保障<i class="inco_img3"></i></div>
        <div class="title_span">院校直接教学，教学有保障报读，审核不通过直接100%退费</div>
      </div>
    </div>
  </div>
</template>
<script>
import dragVerify from '@/components/drag-verify'
import { isMobile } from '@/utils/validate'
import md5 from 'js-md5'
export default {
  name: 'read_login',
  components: {
    dragVerify
  },
  data () {
    return {
      code_btn_text: '发送验证码',
      dragTrue: false,
      setIntervalTime: null,
      formData: {
        institution: '',
        user_name: '',
        phone: '',
        gsign: '',
        appid: window.SITE_CONFIG['readAppId'],
        school_code: '',
        learn_center_code: '',
        phoneCode: ''
      }
    }
  },
  props: {},
  watch: {},
  methods: {
    /*
     *@author wf_Huang
     *@Time 2019/7/24 0024 18:12
     *@function  获取滑动组件返回的值
     *****************************************/
    getDataTrue (value) {
      if (this.formData.phone === '') {
        this.$toast('请输入手机号')
        this.$nextTick(() => {
          this.$refs.dragVerifyData.setReset()
        })
      } else if (!isMobile(this.formData.phone)) {
        this.$toast('手机号格式有误')
        this.$nextTick(() => {
          this.$refs.dragVerifyData.setReset()
        })
      } else {
        this.dragTrue = value
      }
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/24 0024 18:19
     *@function  发送验证码
     *****************************************/
    getPhoneCode () {
      if (this.formData.phone === '') {
        this.$toast('请输入手机号')
        return false
      }
      if (this.formData.dragTrue) {
        this.$toast('请滑动解锁')
        return false
      }
      this.$http({
        url: `${window.SITE_CONFIG['readURL']}/index.php?c=api&m=send_sms`,
        method: 'post',
        data: {
          mobile: this.formData.phone,
          app: 'gk',
          len: '4',
          sms_token: md5(md5(`${this.formData.phone}ENCODEh5_key`))
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.$toast('验证码发送失败')
          return false
        }
        var _this = this
        var timeNumber = 60
        this.$toast('短信已发送')
        this.setIntervalTime = setInterval(function () {
          _this.codeText = `${timeNumber}s重新发送`
          if (timeNumber <= 0) {
            _this.codeText = '获取验证码'
            clearInterval(_this.setIntervalTime)
          }
          timeNumber--
        }, 1000)
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/25 0025 12:43
     *@function  验证验证码
     *****************************************/
    yzPhoneCode () {
      if (!this.formData.phone) {
        this.$toast('请输入手机号')
        return false
      }
      if (this.formData.dragTrue) {
        this.$toast('请滑动解锁')
        return false
      }
      if (!this.formData.user_name) {
        this.$toast('请输入姓名')
        return false
      }
      if (!this.formData.phoneCode) {
        this.$toast('请输入短信验证码')
        return false
      }
      this.$http({
        url: `${window.SITE_CONFIG['readURL']}/index.php?c=api&m=check_sms`,
        method: 'post',
        data: {
          mobile: this.formData.phone,
          code: this.formData.phoneCode
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.$toast('验证码错误')
          return false
        }
        this.setData()
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/7/25 0025 11:34
     *@function  提交数据
     *****************************************/
    setData () {
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/Prepareorderapi/addPrepareOrder.html?appid=${this.formData.appid}&user_name=${this.formData.user_name}&phone=${this.formData.phone}&school_code=${this.formData.school_code}&learn_center_code=${this.formData.learn_center_code}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.$toast('预报读失败')
          return false
        }
        this.$toast('提交成功')
        let _this = this
        setTimeout(function () {
          _this.$router.go(-1)
        }, 1000)
      }).catch(() => {})
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#ffffff')
    this.formData.gsign = this.$route.query.gsign
    if (this.formData.gsign === 'qy') {
      this.formData.institution = '国家开放大学（北京）实验学院'
      this.formData.school_code = '081'
      this.formData.learn_center_code = 'ZSXXZXQYZGJYXY'
    } else {
      this.formData.institution = '国家开放大学（广州）实验学院'
      this.formData.school_code = '041'
      this.formData.learn_center_code = 'ZSD201706080001'
    }
  },
  destroyed () {
    document.querySelector('body').setAttribute('style', 'background-color:#ffffff')
  }
}
</script>
<style lang="scss" scoped>
  .read_login {
    padding: 0 30px 50px 30px;
    .dragVerify{
      margin-bottom: 30px;
    }
    .title_name{
      border-bottom: 3px solid #ccc;
      display: block;
      text-align: center;
      padding-top: 30px;
      margin: 0 50px 135px;
      color: #333;
      height: 100px;
      span{
        display: inline-block;
        background: #fff;
        position: relative;
        bottom: 9px;
        line-height: 50px;
        font-size: 40px;
        font-weight: bold;
        i{
          display: inline-block;
          width: 20px;
          height: 20px;
          background: #ccc;
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
          vertical-align: top;
          margin-top: 16px;
          font-style: normal;
        }
        b{
          display: inline-block;
          padding: 0 30px;
        }
      }
    }
    .form_list{
      .input_item{
        display: flex;
        align-items: center;
        width: 100%;
        height: 88px;
        margin-bottom: 30px;
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        box-sizing: border-box;
        border: 2px solid #ccc;
        padding: 0 20px;
        i{
          color: #989898;
          font-size: 42px;
        }
        input{
          border: 0;
          line-height: 88px;
          width: 100%;
          font-size: 24px;
          padding-left: 20px;
          background-color: transparent;
          &:disabled{
            background-color: transparent;
          }
        }
      }
      .btn_input_item{
        display: flex;
        .get_code{
          margin-left: 15px;
          background-color: #7AC23C;
          width: 300px;
          display: block;
          border: 0;
          color: #FFFFFF;
          font-size: 24px;
          margin-bottom: 30px;
          border-radius: 10px;
        }
        .active{
          opacity: 0.6;
        }
      }
      .btn_submit{
        border-radius: 12px;
        background-color: #B22A30;
        color: #FFFFFF;
        line-height: 88px;
        font-size: 24px;
        border: 0;
        width: 100%;
      }
    }
    .serve_user{
      border-top: 15px solid #F2F1F7;
      margin: 30px -30px 50px;
      h4{
        font-size: 32px;
        text-align: center;
      }
      .tab_item{
        margin: 0 0 30px 30px;
        border-bottom: 1px solid #efefef;
        padding-bottom: 30px;
      }
      .title_p{
        font-size: 28px;
        line-height: 40px;
        color: #333333;
        i{
          margin-left: 15px;
        }
      }
      .inco_img{
        display: inline-block;
        background-image: url(../../../assets/img/modules/read/sprite.png);
        background-position: 94.07115% 34.4086%;
        width: 38px;
        height: 29px;
        background-size: 1431.57895% 1703.44828%;
        vertical-align: middle;
      }
      .inco_img2{
        display: inline-block;
        background-image: url(../../../assets/img/modules/read/sprite.png);
        background-position: 92.607% 49.78261%;
        width: 30px;
        height: 34px;
        background-size: 1813.33333% 1452.94118%;
        vertical-align: middle;
      }
      .inco_img3{
        display: inline-block;
        background-image: url(../../../assets/img/modules/read/sprite.png);
        background-position: 92.607% 64.42516%;
        width: 30px;
        height: 33px;
        background-size: 1813.33333% 1496.9697%;
        vertical-align: middle;
      }
      .title_span{
        font-size: 24px;
        color: #999999;
        line-height: 40px;
        text-indent: 40px;
      }
    }
  }
</style>
